<template>
  <div>
    <el-dialog title="新增季度用水" :visible.sync="dialogVisible" width="60%">
      <!-- 表单 -->
      <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="130px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司名称">
              <el-input v-model="companyNameVal" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="公司类型">
              <el-input v-model="companyTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="单位地址">
              <el-input v-model="companyAddress" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="计划用水总量">
              <el-input type="number" v-model.trim="dataForm.totalWater" disabled></el-input>
            </el-form-item>
          </el-col>
          <span class="more" @click="handleSee">查看</span>
        </el-row>
        <!-- 选择季度用水量详情 -->
        <el-row v-if="dataForm.quarter">
          <el-col :span="6" v-for="(item,itemIndex) in nowQuarterWaterDeclareItem" :key="item.name">
            <el-form-item :label="item.name">
              <el-input type="number" :disabled="itemIndex == 0" v-model.trim="item.water" @input="handleMonth"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="用水类型">
              <el-input v-model="waterTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="申报日期" prop="applyDate">
              <el-date-picker
                v-model="dataForm.applyDate"
                type="date"
                placeholder="选择日期"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属周期">
              <el-date-picker
                disabled
                v-model="dataForm.cycleDate"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="是否超计划申报">
              <el-radio v-model="dataForm.planStatus" label="1">是</el-radio>
              <el-radio v-model="dataForm.planStatus" label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="info" >
          实际用水总量
          <span @click="handleToggle" class="tollage" v-if="realityId"> {{ isOpen ? '收起':'展开' }}</span>
          <span class="other" v-else>暂无</span>
        </div>
        <el-row v-if="isOpen">
          <el-col :span="6" v-for="(item,itemIndex) in listData" :key="item.name">
            <el-form-item :label="item.name">
              <el-input
                type="age"
                v-model.number="item.value"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item :label="list.monthName" v-for="list in item.item" :key="list.monthName">
              <el-input
                type="age"
                v-model.number="list.monthValue"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <waterItem ref="waterItem"></waterItem>
  </div>
</template>

<script>
import { catWanterById, catWaterByYearAndQuarter, insertOrUpdateQuarter } from '@/api/other'
import { listDataVal } from '@/config/dataList'
import { confirm } from '@/config/publicMethod'
import waterItem from '@/components/waterItem/idnex.vue'

export default {
  // 组件注册
  components: {
    waterItem
  },
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        companyId: '',
        companyName: '',
        cycleDate: this.ShowYear(0),
        planStatus: '0',
        applyDate: this.ShowDate(0),
        totalWater: 0, // 用水量
        waterTypeId:'', // 用水id
        // 季度用水量
        nowQuarterWaterDeclareItem: [],
        quarter:''
      },
      dataRules: {
        applyDate: [
          { required: true, message: '请选择所属周期', trigger: 'change' },
        ],
      },
      listData: listDataVal(),
      companyList: [],
      waterTypeList: [], // 用水类型
      companyAddress: '', // 公司地址
      companyTypeName: '', // 公司类型
      waterTypeName:'', //用水类型
      companyNameVal: '', // 公司所下的角色上报用
      nowQuarterWaterDeclareItem: [],
      isOpen: false,
      realityId:null  // 实际用水总量 id
    }
  },
  mounted() {
    this.$bus.$on('selectAndQuarter', (params) => {
      this.$nextTick(() => {
        this.dialogVisible = true
        this.catWaterDeclareByIdReq(params)
      })
    })
  },
  methods: {
    // 查看
    handleSee() {
      this.$refs.waterItem.init(0,this.insertWaterDeclareItemResponses)
    },
    catWaterDeclareByIdReq(params) {
      catWaterByYearAndQuarter(params).then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') {
          this.dialogVisible = false
          this.$message.error(msg)
          return
        }
        this.realityId = data.realityId // 实际用水总量 查询id
        // 计划用水总量
        this.insertWaterDeclareItemResponses = data.insertWaterDeclareItemResponses

        this.dataForm.companyId = data.companyId + '' //'1' // 公司id
        this.companyNameVal = data.companyName // 公司名称
        this.companyAddress = data.companyAddress // 公司地址

        this.dataForm.waterTypeId = data.waterTypeResponse && data.waterTypeResponse.id // 用水id
        this.waterTypeName = data.waterTypeResponse && data.waterTypeResponse.name

        // 季度
        this.dataForm.quarter = data.quarter
        if (data.quarter) {
          // 季度
          let quarter = this.listData.filter(el => el.id == data.quarter)
          quarter[0].water = data.nowQuarter
          // 月份
          quarter[0].item.forEach(el => {
            data.nowQuarterWaterDeclareItem.forEach(ele => {
              if (el.monthId == ele.month) {
                ele.name = el.monthName
              }
            })
          })
          this.nowQuarterWaterDeclareItem = [...quarter, ...data.nowQuarterWaterDeclareItem]
        }
        // 公司类型
        this.companyTypeName = data.companyTypeResponse.companyTypeName
        this.dataForm.totalWater = data.totalWater
       
        this.dataForm.cycleDate = data.cycleDate + ''
        this.dataForm.applyDate = data.applyDate
        this.dataForm.planStatus = data.planStatus + ''
      })
    },
    handleToggle() {
      this.isOpen = !this.isOpen
      catWanterById({id:this.realityId}).then(res=>{
        const { code, data,msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.dataInfoFun(data)
      })
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        const { companyId, waterTypeId, quarter, cycleDate } = this.dataForm
        let params = { 
          companyId, 
          waterTypeId, 
          insertWaterDeclareItemRequest: this.monthFun(this.nowQuarterWaterDeclareItem),
          year: cycleDate, 
          quarter
        }
       const res = await confirm('确定提交该季度数据')
        if (res) {
          insertOrUpdateQuarter(params).then((res) => {
            const { code, msg } = res
            if (code !== '0000') return this.$message.error(msg)
            this.dialogVisible = false
            this.$emit('updata')
          })
        }
      })
    },
    // 季度计算
    handleMonth() {
      let val = 0
      this.nowQuarterWaterDeclareItem[0]['water'] = 0
      this.nowQuarterWaterDeclareItem.forEach(el=>{
        val += Number(el.water)  
      })
      this.nowQuarterWaterDeclareItem[0]['water'] = val
    },
    // 获取每个月的用水数据
    monthFun(res) {
      let monthList = []
      res.shift()  //删除第一项 季度
      res.forEach((el) => {
        let obj = {
          month: 0,
          water: 0,
        }
        obj.month = el.month
        obj.water = el.water
        monthList.push(obj)
      })
      return monthList
    }
  }
}
</script>

<style lang="scss" scoped>
.more{
  line-height: 38px;
  display: inline-block;
  margin-left: 16px;
  cursor: pointer;
  color: #409EFF;
}
.info{
  font-size: 18px;
  margin-bottom: 30px;
  .tollage{
    font-size: 14px;
    cursor: pointer;
    color: #409EFF;
    margin-left: 20px;
  }
  .other{
    font-size: 14px;
    margin-left: 20px;
    color: #999;
  }
}
</style>
